@page "/components/spinner"

<h3>Simple spinner</h3>
<BootstrapSpinner />

<h3>Colors spinner</h3>
<BootstrapSpinner Color="@Color.primary" />
<BootstrapSpinner Color="@Color.secondary" />
<BootstrapSpinner Color="@Color.success" />
<BootstrapSpinner Color="@Color.danger" />
<BootstrapSpinner Color="@Color.warning" />
<BootstrapSpinner Color="@Color.info" />
<BootstrapSpinner Color="@Color.light" />
<BootstrapSpinner Color="@Color.dark" />

<h3>Growing spinner</h3>
<BootstrapSpinner Growing />
<BootstrapSpinner Growing Color="@Color.primary" />
<BootstrapSpinner Growing Color="@Color.secondary" />
<BootstrapSpinner Growing Color="@Color.success" />
<BootstrapSpinner Growing Color="@Color.danger" />
<BootstrapSpinner Growing Color="@Color.warning" />
<BootstrapSpinner Growing Color="@Color.info" />
<BootstrapSpinner Growing Color="@Color.light" />
<BootstrapSpinner Growing Color="@Color.dark" />

<h3>Small spinner</h3>
<BootstrapSpinner Small />
<BootstrapSpinner Growing Small />

<h3>Custom size</h3>
<BootstrapSpinner Style="width:3rem;height:3rem;" />
<BootstrapSpinner Growing Style="width:3rem;height:3rem;" />

<h3>Buttons</h3>
<BootstrapButton>
    <BootstrapSpinner Small />
</BootstrapButton>
<BootstrapButton>
    <BootstrapSpinner Growing Small />
</BootstrapButton>
<BootstrapButton>
    <BootstrapSpinner Small /> Loading...
</BootstrapButton>
<BootstrapButton>
    <BootstrapSpinner Growing Small /> Loading...
</BootstrapButton>
